<template>
    <div class="sidebar">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" theme="dark" mode="vertical" :unique-opened='true' router>
            <el-menu-item index="/dashboard/dashboard">
                <i class="el-icon-setting mgr15"></i>{{$t('dashboard.homePage')}}
            </el-menu-item>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-date mgr15"></i>{{$t('sidebar.hostMsg')}}</template>
                <el-menu-item class="pl50" index="/taskHost/taskHostConfig">{{$t('sidebar.taskHostConfig')}}</el-menu-item>
                <el-menu-item class="pl50" index="/taskHost/taskHostStatus">{{$t('sidebar.taskHostStatus')}}</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-menu mgr15"></i>{{$t('sidebar.taskCronerMsg')}}</template>
                <el-menu-item class="pl50" index="/taskCroner/taskCronerConfig">{{$t('sidebar.taskCronerConfig')}}</el-menu-item>
                <el-menu-item class="pl50" index="/taskCroner/taskCronerAlertConfig">{{$t('sidebar.taskCronerAlertConfig')}}</el-menu-item>
                <el-menu-item class="pl50" index="/taskCroner/taskCronerLog">{{$t('sidebar.taskCronerLog')}}</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title"><i class="el-icon-document mgr15"></i>{{$t('sidebar.listTaskMsg')}}</template>
                <el-menu-item class="pl50" index="/taskRunner/taskRunnerConfig">{{$t('sidebar.taskRunnerConfig')}}</el-menu-item>
                <el-menu-item class="pl50" index="/taskRunner/taskRunnerAlertConfig">{{$t('sidebar.taskRunnerAlertConfig')}}</el-menu-item>
                <el-menu-item class="pl50" index="/taskRunner/taskRunnerLog">{{$t('sidebar.taskRunnerLog')}}</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title"><i class="el-icon-time mgr15"></i>{{$t('sidebar.controlAndAlert')}}</template>
                <el-menu-item class="pl50" index="/taskAlert/taskAlertContact">{{$t('sidebar.taskAlertContact')}}</el-menu-item>
                <el-menu-item class="pl50" index="/taskAlert/taskAlertInfo">{{$t('sidebar.taskAlertInfo')}}</el-menu-item>
                <el-menu-item class="pl50" index="/taskAlert/taskAlertInfoNotify">{{$t('sidebar.taskAlertInfoNotify')}}</el-menu-item>
            </el-submenu>
        </el-menu>

    </div>
</template>

<script>
    import { mapGetters, mapMutations } from 'vuex';
    export default {
        data() {
            return {
            }
        },
        computed:{
            ...mapGetters([
                'isMenuShowGetter'
            ])
        },
        methods:{
            ...mapMutations([
                'changeMenuShow'
            ]),
            onShowMenu() {
                let isMenuShow = !this.$store.state.menu.isMenuShow;
                this.changeMenuShow(isMenuShow);
            }
        }
    }
</script>

<style lang="stylus">
    .sidebar
        display block
        position absolute
        width 250px
        left 0
        top 0
        bottom 0
        background #324157
        transition: all .28s ease-out;
        >ul
            height:100%

</style>
